<template>
	<view class="content">
		<view class="head-list bg-white flex solid-top solid-bottom">
			<view class="goods-type-view">
				<scroll-view scroll-x class="bg-white nav">
					<view class="flex text-center">
						<view class="cu-item flex-sub" :class="index==goodsType?'text-orange cur':''" v-for="(item,index) in goodsTypeList"
						 :key="index" @tap="tabSelect" :data-id="index">
							{{item}}
						</view>
					</view>
				</scroll-view>
			</view>
			<view class="goods-type-view">
				<view class="cu-bar search bg-white">
					<view class="search-form round">
						<text class="cuIcon-search"></text>
						<input :adjust-position="false" @confirm="doSearch" type="text" placeholder="搜索商品" confirm-type="search" v-model="searchText"></input>
						<text @click="clearSearch" v-show="searchText != ''" class="cuIcon-roundclosefill text-xl"></text>
					</view>
				</view>
			</view>
		</view>
		<view class="content-list">
			<scroll-view scroll-y class="left-aside">
				<view v-for="item in flist" :key="item.id" class="f-item b-b" :class="{active: item.id === currentId}" @click="tabtap(item)">
					{{item.typeName}}
				</view>
			</scroll-view>
			<scroll-view scroll-with-animation scroll-y class="right-aside" :scroll-into-view="scrollId">
				<view class="s-list">
					<view class="flex flex-wrap">
						<text class="s-item" @click="toSpecialArea(item)" v-for="item in typeList">{{item.typeName}}</text>
					</view>
					<view class="t-list">
						<view @click.stop="navToList(titem.id)" :id="'goods-'+titem.id" class="t-item" v-for="titem in goodsList"
						 :key="titem.id">
							<image :src="host + titem.goodsImg"></image>
							<text class="response text-cut  text-sm">{{titem.goodsName}}</text>
							<text class="response text-cut text-price text-red text-sm">
								<text class="price">{{goodsType == 0 ? titem.price : parsePrice(titem.price)}}</text>
								<text class="m-price" v-if="goodsType == 1">¥{{titem.price}}</text>
							</text>
						</view>
					</view>
				</view>
				
				
				<!-- <view v-for="item in slist" :key="item.type.id" class="s-list" :id="'main-'+item.type.parent.id" @touchstart="asideScroll(item.type.parent.id)">
					<text class="s-item" @click="toSpecialArea(item.type)">{{item.type.typeName}}</text>
					<view class="t-list">
						<view @click.stop="navToList(titem.id)" v-if="titem.pid === item.id" :id="'goods-'+titem.id" class="t-item" v-for="titem in item.goods"
						 :key="titem.id">
							<image :src="host + titem.goodsImg"></image>
							<text class="response text-cut  text-sm">{{titem.goodsName}}</text>
							<text class="response text-cut text-price text-red text-sm">
								<text class="price">{{goodsType == 0 ? titem.price : parsePrice(titem.price)}}</text>
								<text class="m-price" v-if="goodsType == 1">¥{{titem.price}}</text>
							</text>
						</view>
					</view>
				</view> -->
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				searchText: '',
				goodsTypeList: ['热卖商品', '折扣商品'],
				goodsType: 0,
				typeId: '',
				sizeCalcState: false,
				scrollId: '',
				currentId: '',
				flist: [],
				slist: [],
				typeList: [],
				goodsList: [],
				host: '',
				allGoodsList: [],
				allTypeList: []
			}
		},
		onShow() {
			this.loadData();
		},
		methods: {
			/* 搜索商品 */
			doSearch() {
				var text = this.searchText.trim();
				for (var i in this.slist) {
					var goods = this.slist[i].goods;
					for (var j in goods) {
						if (goods[j].goodsName.indexOf(text) > -1 || goods[j].goodsType.typeName.indexOf(text) > -1) {
							this.scrollId = 'goods-' + goods[j].id;
							this.currentId = this.slist[i].type.id;
							return;
						}
					}
				}
				uni.showToast({
					icon: 'none',
					title: '没有找到~',
					duration: 1200
				});
			},
			parsePrice(price){
				return this.$math._moneySwitch(this.$math._mul(price, 0.2), 100)
			},
			clearSearch() {
				this.searchText = '';
			},
			tabSelect(e) {
				this.goodsType = e.currentTarget.dataset.id;
			},
			// async
			loadData() {
				let that = this;
				that.host = this.$host;
				that.$network.nonAuthRequest("InitAction/initCategory", {}, function(res) {
					let data = res.data.data;
					that.flist = data.special;
					that.currentId = that.flist[0].id;
					that.allGoodsList = data.goods;
					that.allTypeList = data.goodsType;
					
					that.initTypeAndGoods();
				}, "", function(res) {
					console.error(JSON.stringify(res))
					uni.showToast({
						icon: 'none',
						title: '加载失败',
						duration: 1200
					})
				});
			},
			initTypeAndGoods() {
				let typeList = [];
				typeList = this.allTypeList.filter(item => {
					return item.parent.id === this.currentId;
				})
				
				let goodsList = [];
				goodsList = this.allGoodsList.filter(item => {
					return item.goodsType.parent.id === this.currentId
				})
				this.typeList = typeList;
				this.goodsList = goodsList;
			},
			//一级分类点击
			tabtap(item) {
				this.scrollId = 'main-' + item.id;
				this.currentId = item.id;
				this.initTypeAndGoods();
			},
			//右侧栏滚动
			asideScroll(e) {
				//this.scrollId = 'main-' + e;
				this.currentId = e;
			},
			// 跳转到专区
			toSpecialArea(type) {
				let parentId = type.parent ? type.parent.id : type.id;
				if(this.goodsType == 1) {
					// 折扣商品
					uni.navigateTo({
						url:'/pages/product/list?type=1&typeId=' + type.id + "&parentId=" + parentId
					})
				} else {
					// 热卖商品
					uni.navigateTo({
						url:'/pages/product/list?type=0&typeId=' + type.id + "&parentId=" + parentId
					})
				}
			},
			navToList(id) {
				var type = this.goodsType;
				uni.navigateTo({
					url: `/pages/product/product?type=${type}&id=${id}`
				})
			}
		}
	}
</script>

<style lang='scss'>
	.goods-type-view {
		width: 50%;
		height: 100%;
	}

	.head-list {
		height: 100upx;
		width: 100%;
		display: flex;
	}

	.content-list {
		width: 100%;
		height: calc(100% - 100upx);
	}

	page,
	.content {
		height: 100%;
		background-color: #f8f8f8;
	}

	.content-list {
		display: flex;
		flex-wrap: wrap;
	}

	.left-aside {
		flex-shrink: 0;
		width: 200upx;
		height: 100%;
		background-color: #fff;
	}

	.f-item {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 100upx;
		font-size: 28upx;
		color: $font-color-base;
		position: relative;

		&.active {
			color: $base-color;
			background: #f8f8f8;

			&:before {
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				height: 36upx;
				width: 8upx;
				background-color: $base-color;
				border-radius: 0 4px 4px 0;
				opacity: .8;
			}
		}
	}

	.right-aside {
		flex: 1;
		overflow: hidden;
		padding-left: 20upx;
		height: 100%;
		overflow-x: hidden;
		overflow-y: auto;
	}

	.s-item {
		display: flex;
		align-items: center;
		/* padding-top: 8upx; */
		font-size: 28upx;
		color: $font-color-dark;
		margin: 15upx 20upx;
		background-color: #f1f1f1;
		padding: 20upx 30upx;
	}

	.t-list {
		display: flex;
		flex-wrap: wrap;
		width: 100%;
		background: #fff;
		padding-top: 12upx;

		&:after {
			content: '';
			flex: 99;
			height: 0;
		}
	}

	.t-item {
		flex-shrink: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		width: 265upx;
		font-size: 26upx;
		color: #666;
		padding-bottom: 20upx;

		image {
			width: 240upx;
			height: 240upx;
		}

		text {
			width: 240upx;
			line-height: 60upx;
		}
	}
	
	.price {
		font-size: $font-lg + 2upx;
	}
	
	.m-price {
		margin: 0 12upx;
		color: $font-color-light;
		text-decoration: line-through;
	}
</style>
